<template>
	<view class="zai-box">
		<image src="../../../static/zaizai-login/register.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-title">用户注册</view>
		<view class="zai-form">
			<form @submit="formSubmit">

				<input class="zai-input" name='userName' placeholder="请输入用户名" v-model="info.userName"  @blur='checkusername'/>
				<input class="zai-input" name='phonenumber' placeholder="请输入手机号" v-model="info.phonenumber"  @blur='checkphone' />

				<view class="zai-input sexs">
					<text>性别</text>
					<radio-group name="sex" @change='changesex'>
						<label>
							<radio value="0" checked/><text>男</text>
						</label>
						<label>
							<radio value="1" /><text>女</text>
						</label>
					</radio-group>

				</view>

				<view class="zai-input seeshow">
					<input class="uni-input" placeholder="请输入密码" :password="showPassword" name="password"
						v-model="info.password" @blur='checkpassword'/>
                     <u-icon :name='name'  size="20"  @click="changeOnepass"></u-icon>
					
				</view>

				<view class="zai-input seeshow">
					<input class="uni-input" placeholder="再次确认密码" :password="seePassword" name="dbpassword"
						v-model="info.dbpassword"   @blur="checkPassword" />
                     <u-icon :name='type'  size="20"  @click="againPassword"></u-icon>
					
				</view>

				<button class="zai-btn" form-type="submit">立即注册</button>
			</form>
			<navigator url="../login/login" hover-class="none" class="zai-label">已有账号，点此去登录</navigator>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import {reg} from '../../../untils/vaildate.js';
	import {gotoregister} from '../../../api/useraApi.js'

	const showPassword = ref(true) //密码
	const seePassword = ref(true) //再次输入密码
	const name=ref('eye')       //one密码显示
	const type=ref('eye')      //确认密码显示

	//基础表单数据
	const info = ref({
		userName: '',
		phonenumber: '',
		sex: 0,
		password: '',
		dbpassword: ''
	})

	//点击密码 
	const changeOnepass=()=>{
		showPassword.value = !showPassword.value;
		name.value=(showPassword.value==true)?'eye':'eye-fill'
	}
	
	//再次点击密码
	const againPassword = () => {
		seePassword.value = !seePassword.value;
		type.value=(seePassword.value==true)?'eye':'eye-fill'
	}
	
	//确认密码失去焦点触发验证
	const checkPassword=(e)=>{
		//先判断密码不能为空 在做正则校验 不通过则报密码错误  和确认密码做核对是否一致
		if(e.detail.value=='' || e.detail.value==null){
			 uni.showToast({
				title: '密码不能为空',
				icon: "error",
				duration: 1000
			 });
		}else if(reg.pwd.test(e.detail.value)==reg.pwd.test(info.value.password)){

			if(e.detail.value!=info.value.password){
				uni.showToast({
					title: '两次密码不一致',
					icon: "error",
					duration: 1000
				});
			}
		}
	}
	
	//密码失去焦点触发验证
	const checkpassword=(e)=>{
		//先判断密码不能为空 在做正则校验 不通过则报密码错误  和确认密码做核对是否一致
		if(e.detail.value=='' || e.detail.value==null){
			 uni.showToast({
				title: '密码不能为空',
				icon: "error",
				duration: 1000
			 });
		}else if(!reg.pwd.test(e.detail.value)) {
					
			 uni.showToast({
				title: '6-16位数字加字母密码',
				icon: "error",
				duration: 1000
			 });
		}else if(reg.pwd.test(e.detail.value)==reg.pwd.test(info.value.dbpassword)){

			if(e.detail.value!=info.value.dbpassword){
				uni.showToast({
					title: '两次密码不一致',
					icon: "error",
					duration: 1000
				});
			}
		}
	}

    //手机号失去焦点触发验证
	const checkphone=(e)=>{
		
		if(e.detail.value=='' || e.detail.value==null){
					 uni.showToast({
					 	title: '手机号不能为空',
						icon: "error",
					 	duration: 1000
					 });
		}else if(!reg.phone.test(e.detail.value)) {
					
					 uni.showToast({
					 	title: '请输入正确的手机号',
						icon: "error",
					 	duration: 1000
					 });
		}
		
	}

	 //用户名失去焦点触发验证
	 const checkusername=(e)=>{
		
		 if(e.detail.value=='' || e.detail.value==null){
			 uni.showToast({
			 	title: '用户名不能为空',
				icon: "error",
			 	duration: 1000
			 });
		 }else if(!reg.account.test(e.detail.value)) {
			
			 uni.showToast({
			 	title: '用户名必须是字母数字混合',
				icon: "error",
			 	duration: 1000
			 });
		 }
			 
	 }

	//点击更换性别
	const changesex = (evt) => {
		info.value.sex = evt.detail.value
	}

	//点击立即注册
	const formSubmit =async(e) => {

		var formdata = e.detail.value

		//输入的内容不能为空
		if (!formdata.userName || !formdata.sex || !formdata.phonenumber || !formdata.password || !formdata.dbpassword) {
			uni.showToast({
				title: '内容不能为空',
				icon: "error",
				duration: 1000
			});
		} else {
			let res = await gotoregister({
				data:{
				userName:formdata.userName,
				password:formdata.password,
				phonenumber:formdata.phonenumber,
				sex:formdata.sex
				}
			})
			console.log(res);
			
			if(res.code==500){
				uni.showToast({
					title: res.msg,
					icon: "error",
					duration: 1000
				});
			}else if(res.code==200){
				uni.navigateTo({
					url:'../login/login'
				})
			}
			
			
		}

	}
</script>
<style lang="scss">
	.zai-box {
		padding: 0 100upx;
		position: relative;
	}

	.zai-logo {
		width: 100%;
		width: 100%;
		height: 310upx;
	}

	.seeshow {
		display: flex;
		justify-content: space-between;
	}

	.sexs {
		display: flex;

		text {
			margin-right: 20px;
		}

	}

	.zai-title {
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}

	.zai-form {
		margin-top: 60upx;
	}

	.zai-input {
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 32upx;
	}

	.input-placeholder,
	.zai-input {
		color: #7d899c;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
		margin-top: 60upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}
</style>